// App.jsx
import React, { useState } from 'react';
import { Routes, Route, Link, useLocation } from 'react-router-dom';
import reactLogo from './assets/react.svg';
import viteLogo from '/vite.svg';
import './App.css';
import './background.css';
import './index.css';
import NewPage from './NewPage'; // 导入新页面组件
import Sidebar from './components/Sidebar'; // 导入侧边栏组件

function App() {
  const [count, setCount] = useState(0);
  const location = useLocation();

  // 检查当前路径是否为 /new
  const showSidebar = location.pathname === '/new';

  return (
    <div id="app-container" style={{ display: 'flex', height: '100vh' }}>
      {showSidebar && <Sidebar />}
      <div style={{ flex: 1, padding: 20, marginLeft: showSidebar ? 256 : 0 }}>
        <Routes>
          <Route path="/new" element={<NewPage />} />
          <Route path="/" element={
            <div>
              <div>
                <a href="https://vitejs.dev" target="_blank" rel="noopener noreferrer">
                  <img src={viteLogo} className="logo" alt="Vite logo" />
                </a>
                <a href="https://react.dev" target="_blank" rel="noopener noreferrer">
                  <img src={reactLogo} className="logo react" alt="React logo" />
                </a>
              </div>
              <h1>Vite + React</h1>
              <div className="card">
                <button onClick={() => setCount((count) => count + 1)}>
                  count is {count}
                </button>
                <p>
                  Edit <code>src/App.jsx</code> and save to test HMR
                </p>
                <Link to="/new" className="nav-button">Go to new page</Link>
              </div>
              <p className="read-the-docs">
                Click on the Vite and React logos to learn more
              </p>
            </div>
          } />
        </Routes>
      </div>
    </div>
  );
}

export default App;

